<template>
  <div class="iframe-container">
    <iframe :src="src" scrolling="auto" frameborder="0" class="frame" :onload="onload()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      loading: null
    }
  },
  watch: {
    $route: {
      handler() {
        this.resetSrc()
      }
    }
  },
  mounted() {
    this.resetSrc()
  },
  methods: {
    // 获取路径
    resetSrc() {
      this.load()
      this.src = this.$route.query.url
    },
    load() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('#appMain')
      })
    },
    onload() {
      if (this.loading) {
        this.loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe-container {
  position: relative;
  /*width: 100vw;*/
  /*height: 100vh;*/
  .frame {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
}
</style>
